// 1 发送请求 获取文章列表数据 （参数自己的理解 写下来）
//   1 为了后期方便修改 请求参数 定义成全局变量 

// const layui = require("../libs/layui/layui")

// const { template } = require("../libs/art-template/template-web")

//   2 定义函数 发送请求 获取数据 渲染页面 art-template 来渲染页面
$(function () {
    // 1.1 请求参数 全局变量
    let params = {
        // string	搜索关键词，可以为空，为空返回某类型所有文章
        key: "",
        // string	文章类型id，可以为空，为空返回所有类型文章
        type: "",
        // string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state: "",
        // number	当前页，为空返回第1页 默认在的数字
        page: 1,
        // number	每页显示条数，为空默认每页6条
        perpage: 10
    }
    // 1.2 发送请求获取文章列表数据 /admin/article/query
    function articleQuery() {
        $.get("/admin/article/query", params, function (res) {
            // console.log(res);
            const html = template("trTpl", { list: res.data.data })
            $("tbody").html(html)

            renderPager(res.data.totalCount)
        })
    }
    // 2.发送请求 获取 文章列表数据 /admin/category/list
    function getCategoryList() {
        $.get("/admin/category/list", function (res) {

            let html = "<option value=''>所有类型</option>";
            res.data.forEach(value => {
                html += `<option value="${value.id}">${value.name}</option>`;
            })
            $("#selCategory").html(html)
        })
    }
    // 3 动态渲染分页组件
    function renderPager(count) {
        layui.laypage.render({
            elem: 'pager',
            count,
            // 默认 每一页的数据条数 10,
            limit: params.perpage,
            // 显示页码
            curr: params.page,
            // 点击页码事件
            jump(obj, first) {
                // 首次不执行
                if (!first) {
                    // 获取被点击的obj first
                    console.log(obj, first);

                    params.page = obj.curr;
                    articleQuery();
                }
            }
        })
    }
    // 4  给筛选按钮 绑定点击事件
    $("#btnSearch").click(function () {
        // 标题
        params.key = $("#aname").val();
        // 文章类型
        params.type = $("#selCategory").val();
        // 发布状态
        params.state = $("#selStatus").val();
        // 有bug  往往都需要 重置 分页参数  
        // 一旦 实现筛选功能 往往都需要 重置 页码

        params.page = 1;
        // 发送请求 获取对应的数据
        articleQuery();
    })
    // 5 给重置按钮 绑定点击事件
    $("#btnReset").click(function () {
        // 5.1请求参数
        params = { key: "", type: "", state: "", page: 1, perpage: 10 }
        // 5.2搜索表单
        $("#aname").val("");
        // 文章类型
        $("#selCategory").val("");
        // 发布状态
        $("#selStatus").val("");

        // 5.3 重置分页组件  不需要做  因为在 获取文章列表的时候 内部 已经重置 组件
        // 5.4 刷新页面
        articleQuery();
    })

    articleQuery()
    getCategoryList()
})